import { useEffect } from "react";
import { Outlet, useNavigate, useRoutes, useLocation } from "react-router-dom";
import routes from "./router"; //路由表写法


function App() {

  function ToLogin() { //跳转登录页
    const useNavigateTo = useNavigate()
    useEffect(() => {
      useNavigateTo('/login')
    }, [])
    return <div></div>;
  }

  function ToPage() {  // 跳转首页
    const useNavigateTo = useNavigate()
    useEffect(() => {
      useNavigateTo('/page1')
    }, [])
    return <div></div>;
  }


  //路由守卫写法
  function BeforeRouter() {
    const outlet = useRoutes(routes); //路由表写法
    const location = useLocation()
    let token = window.localStorage.getItem('token')
    // 访问登录页并有token  跳转首页
    if (location.pathname === '/login' && token) {
      return <ToPage />
    }
    // 没有token 跳转首页以外的页面  跳转登录页
    if (location.pathname !== '/login' && !token) {
      return <ToLogin />
    }
    return outlet

  }

  return (
    <div className="App">

      {/*Outlet 与vue的<router-view>类似 */}
      {/* <Outlet></Outlet> */}

      {/* 路由表写法 */}
      {/* {outlet} */}
      <BeforeRouter />
    </div>
  );
}

export default App;
